<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>

<script>
function removeImage(fileId){
    bootbox.confirm("确定删除该图片吗?", function(result) {
      if (result) {
      	$.ajax({
			async : true,
			url: "${ctx}/file/deleteFile.do?fileId="+fileId,
			type:"post",
			dataType:"json",
			success: function(ret){
				if (ret[0] == "ok") {
					alert(ret[1]);
					$(".page-content-area").load("${ctx}/demo/imageShow.do");
				} else {
					alert(ret[1]);
				}
			},
			error: function(ret){
				alert(ret.responseText);
			}
		});	
      }  
    });
}    
</script>
<div class="row">
	<div class="col-xs-12">
		<div>
			<ul class="ace-thumbnails clearfix">
			<c:forEach var="pic" items="${pics}">
				<li>
					<a href="/pic/${pic.filePath}" title="Photo Title" data-rel="colorbox" data-lightbox="example-set">
						<img class="example-image" width="150" height="150" alt="150x150" src="/pic/${pic.filePath}" />
					</a>
				<div class="tools">
					<a href="#">
						<i class="ace-icon fa fa-link"></i>
					</a>
					<a href="#">
						<i class="ace-icon fa fa-paperclip"></i>
					</a>
					<a href="#">
						<i class="ace-icon fa fa-pencil"></i>
					</a>
					<a href="#" onclick="removeImage('${pic.fileId}');">
						<i class="ace-icon fa fa-times red"></i>
					</a>
				</div>
				</li>
			</c:forEach>
			</ul>
		</div>
	</div>
</div>

